<template>
  <div>
    <pre>我是HTML5新增语义化标签</pre>
    <!-- 组件:在使用的时候无非是自定义标签 
           自定义事件:主要的目的是子组件给父组件传递数据
           ---事件源:Header组件标签
           ---事件类型:erha
           ---事件的回调:是组件App实例的一个方法
               如何触发:这个自定义事件，由这个事件源组件实例触发$emit，才会触发这个自定义事件！！！
     -->
    <Header ref="box" @></Header>
  </div>
</template>

<script>
//引入子组件
import Header from "./components/Header.vue";
export default {
  name: "",
  components: {
    Header,
  },
  //组件挂载完毕
  mounted() {
    //获取到事件源:Header组件的实例
    //绑定一个自定义事件
    //相当于给Header组件的实例绑定了一个自定义事件
    //$on与$emit这两个方法都是Vue.prototype原型对象的方法：VM、VC
    //当App父组件mounted执行的时候，父组件挂载完毕,子组件事件源已经有了！！！！获取到事件源，给他通过$on绑定自定义事件！！
    // this.$refs.box.$on('erha',(car)=>{
    //    console.log(car);
    // });

    
    //这种写法是不行的,因为你是给App组件实例绑定的二哈事件
    //但是是Header组件实例触发的,因为事件源不同意，这辈子下面代码也会不执行
    // this.$on('erha',(car)=>{
    //     console.log(car)
    // })
  },
};
</script>

<style scoped lang="less">
div {
  width: 800px;
  height: 400px;
  margin: 20px auto;
  background: green;
}
</style>
